<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>dajiale</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/jutils-src"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <!-- 1. 导入Vue的包 -->
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

  <style>
    /* .cb_index {left: 30px;padding: 6px;} */
    .guess {
      display: inline-block;
      width: 20px;
    }

    /* .checkboxSelect{checked:} */
  </style>

</head>

<body>

  <!-- 将来 new 的Vue实例，会控制这个 元素中的所有内容 -->

  <!-- Vue 实例所控制的这个元素区域，就是我们的 V  -->
  <div id="app">

    <!-- <span>{{ msg }}</span> --- <span>{{order}}</span> <span>{{value}}</span> -->

    <div class="container">
      <input type="text" v-model:value="stroename">
      <input type="text" v-model:value="storelocal_money[0]">
      <input type="text" v-model:value="storelocal_money[1]">
      <button type="submit" class="btn btn-danger" v-on:click="streoMoney">moneyIndex</button>

      <button type="submit" class="btn btn-danger" v-on:click="storetolocal">保存数据</button>
      <button type="submit" class="btn btn-danger" v-on:click="getstrorelocal">读取数据 </button>
      <button type="submit" class="btn btn-danger" v-on:click="debugtest">对比数据</button>
      
      <div class="row" v-for="(item,i) in list">
        <div class="col-xs-1"><span><input type="checkbox" value=""></span></div>
        <div class="col-xs-1"><span>{{item[0]}}</span></div>
        <div class="col-xs-1">
          <div class="guess">{{item[1]}}</div><span class="cb_index"><input type="checkbox" value=""
              v-bind:checked="checkedState(item[10][0])" v-on:click="item[10][0] =1"></span>
        </div>
        <div class="col-xs-1">
          <div class="guess">{{item[6]}}</div><span class="cb_index"><input type="checkbox" value=""
              v-bind:checked="checkedState(item[10][1])" v-on:click="item[10][1] =1"></span>
        </div>
        <div class="col-xs-1">
          <div class="guess" style="color:red;">{{item[7]}}</div><span class="cb_index"><input type="checkbox" value=""
              v-bind:checked="checkedState(item[10][2])" v-on:click="item[10][2] =1"></span>
        </div>
        <div class="col-xs-1">
          <div class="guess">{{item[8]}}</div><span class="cb_index"><input type="checkbox" value=""
              v-bind:checked="checkedState(item[10][3])" v-on:click="item[10][3] =1"></span>
        </div>
        <div class="col-xs-1">
          <div class="guess">{{item[9]}}</div><span class="cb_index"><input type="checkbox" value=""
              v-bind:checked="checkedState(item[10][4])" v-on:click="item[10][4] =1"></span>
        </div>

        <div class="col-xs-1"><span>{{item[4]}}</span></div>
        <div class="col-xs-1"><span>{{item[2]}}</span></div>
        <div class="col-xs-1"><span>{{item[3]}}</span></div>

        <div class="col-xs-2">
          <label> <input type="checkbox" value="" :checked="item[5] ==0?false:true">
            Right
          </label>
        </div>
      </div>
      <div>
        <div class="col-xs-2"><span>{{alltotal}}</span></div>
        <div class="col-xs-1"><span>{{total[0]}}/{{alltotal}}</span></div>
        <div class="col-xs-1"><span>{{total[1]}}/{{alltotal}}</span></div>
        <div class="col-xs-1"><span>{{total[2]}}/{{alltotal}}</span></div>
        <div class="col-xs-1"><span>{{total[3]}}/{{alltotal}}</span></div>
        <div class="col-xs-1"><span>{{total[4]}}/{{alltotal}}</span></div>
        
      </div>
      <hr>
      <button type="submit" class="btn btn-danger" v-on:click="readfile">提交</button>
      <button type="submit" class="btn btn-danger" v-on:click="changeMode">更改模式</button>
    </div>
   


  </div>
  <div class="main">

    <form action="http://localhost:3060/api/dajialeFiveCarSave" class="container" method="post" target="nm_iframe">
      <!-- <form action="http://localhost:3060/api/saveData" class="container" method="post" target="nm_iframe"> -->
        <input type="submit" value="Submit" style="display: inline-block;" /> <input type="text" name="user" class="inputsubmit" style="width: 80%;display: inline-block;">
      <!-- expect:<input type="text" name="expect" class="input">   -->
      <div class="submit clearfloat">

      </div>
      
    </form>
  </div>

  <iframe id="id_iframe" name="nm_iframe" style="display:none;"></iframe>
  <div style="height: 50px;"></div>

  <script>
    // 2. 创建一个Vue的实例
    // 当我们导入包之后，在浏览器的内存中，就多了一个 Vue 构造函数
    //  注意：我们 new 出来的这个 vm 对象，就是我们 MVVM中的 VM调度者
    //用户名:a1c6101a86decff2581fa6646b7d4a4b   密码:a123456

    var min = 1;
    var max = 10;
    let list2 = [];


    var vm = new Vue({
      el: '#app',  // 表示，当前我们 new 的这个 Vue 实例，要控制页面上的哪个区域
      // 这里的 data 就是 MVVM中的 M，专门用来保存 每个页面的数据的
      data: { // data 属性中，存放的是 el 中要用到的数据
        msg: 'five minument',// 通过 Vue 提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素了【前端的Vue之类的框架，不提倡我们去手动操作DOM元素了】
        msg2: 'hello vue .this is data object of ',
        order: 0,
        value: 0,
        stroename: "ll1",
        storelocal_money: [0, 0, 0],
        list: [

        ],
        checkboxIndexList: [

        ],
        total:[0,0,0,0,0],
        alltotal:0,
        checkedState: function (whe) {
          if (whe == 1) return true;
          else if (whe == 0) return false;
        },
        // arr:[],
        api_name: "apiName",
        // api_url: "http://localhost:3060/api/api_dajiale_oneCar",
        api_url: "http://150.158.138.79/api/api_dajiale_oneCar"
      },
      methods: {
        streoMoney() {

          localStorage.setItem(this.api_name, this.stroename);
        },
        compData() {
          this.list.forEach(ele => {
            if (ele[1] == ele[4]) {
              this.$set(ele, 5, 1);
              console.log("comdataed.")
            }
          })
        },
        storetolocal() {
          localStorage.setItem(this.api_name, this.stroename);
        },
        getstrorelocal() {
          this.api_url = (localStorage.getItem(this.api_name));
        },
        get() {
          let arr = [];
          let now = new Date();
          let hour = now.getHours();
          let minu = now.getMinutes();
          let second =now.getSeconds();

          // let num = hour > 4  ? (hour - 13) * 12 + parseInt((minu +1) / 5) : (hour) * 12 + parseInt((minu +1)/ 5) + 102;
          // let num = hour > 4  ? (hour ) * 12 + parseInt((minu +1) / 5) : (hour) * 12 + parseInt((minu +1)/ 5) + 132;
          let num = hour * 60 + parseInt((minu)) + 1;
          if(second >50) num++;
          // num =num - ;
          this.order++;
          if (this.order == 11) this.order = 1;
          this.value = Math.floor(Math.random() * (max - min + 1)) + min;
          // console.log(this.value);
          //0       1           2         3     4          5     6         7          8         9  
          //排序号   预测号码   开奖时间    期号  实际号码   标记    预测2  预测3     预测4        预测5
          arr[0] = this.order;
          arr[1] = this.value;
          arr[2] = jutils.formatDate(new Date(), " HH:ii:ss");
          arr[3] = num;
          arr[4] = 0;
          arr[5] = 0;
          arr[6] = Math.floor(Math.random() * (max - min + 1)) + min;
          arr[7] = Math.floor(Math.random() * (max - min + 1)) + min;
          arr[8] = Math.floor(Math.random() * (max - min + 1)) + min;
          arr[9] = Math.floor(Math.random() * (max - min + 1)) + min;
          arr[10] = [0, 0, 0, 0, 0];
          
          this.list.push(arr);
          if (this.list.length > 600) this.list.shift();
          // if(arr[3])
          // list2.push(this.arr);
          // console.log(this.list)
          this.alltotal ++;
          window.scrollTo(0,document.body.scrollHeight);
        },
        getLocalTime() {
          //  let time =new Date();
          //  jutils.formatDate(new Date(1533686888*1000),"YYYY-MM-DD HH:ii:ss");
        },
        spreadwork() {
          var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'));
          var excelIo = new GC.Spread.Excel.IO();
        },
        debugtest() {
          this.list.forEach(function (elem, index) {
            // if (elem[4] != 0) {

            console.log(elem[3])
            console.log(elem[4] % 2)
            for (i = 0; i < 4; i++) {
              console.log(elem[6 + i] % 2)
            }


          })
        }
        ,
        changeMode() {
          readfile();
          _this=this;
          this.list.forEach(function (elem, index) {
            console.log("changeMode")
            if (elem[4] === elem[1]) _this.$set(elem[10], 0, 1); else _this.$set(elem[10], 0, 0);
            if (elem[4] === elem[6]) _this.$set(elem[10], 1, 1); else _this.$set(elem[10], 1, 0);
            if (elem[4] === elem[7]) _this.$set(elem[10], 2, 1); else _this.$set(elem[10], 2, 0);
            if (elem[4] === elem[8]) _this.$set(elem[10], 3, 1); else _this.$set(elem[10], 3, 0);
            if (elem[4] === elem[9]) _this.$set(elem[10], 4, 1); else _this.$set(elem[10], 4, 0);
            // }


          })
        }
        ,
        readfile() {
          let api =
            console.log("hel")
          let _this = this;
          axios.get(_this.api_url)
            .then(function (response) {

              let mydata = response.data.data;
              console.log(mydata)
              let newData = mydata.map(function (elem, index, mydata) {
                let expect = parseInt(elem.expect.substr(8, 4));

                let arrstr = elem.opencode.split(',');
                let arrNum = arrstr.map(function (temp, index, arrstr) {
                  return parseInt(temp);
                })

                return { expect, arrNum };

              })
              console.log(newData);
              //*** 得到新的数据 格式，{期号，开奖号}
              _this.list.forEach(function (elem, index) {
                newData.forEach(function (newdataElem, newdataIndex) {

                  if (elem[3] == newdataElem.expect) {
                    // elem[4] = newdataElem.arrNum[elem[0]-1];
                    _this.$set(elem, 4, newdataElem.arrNum[elem[0] - 1]);
                    //  elem[4] = 5;
                    console.log(elem[3])
                    console.log(newdataElem.expect)
                  }
                })

              })

              _this.total =[0,0,0,0,0];
              _this.list.forEach(function (elem, index) {

                if (elem[4] != 0) {
                  if (elem[4] % 2 === elem[1] % 2)  {elem[10][0] = 1;_this.total[0]++}
                  if (elem[4] % 2 === elem[6] % 2)  {elem[10][1] = 1;_this.total[1]++}
                  if (elem[4] % 2 === elem[7] % 2)  {elem[10][2] = 1;_this.total[2]++}
                  if (elem[4] % 2 === elem[8] % 2)  {elem[10][3] = 1;_this.total[3]++}
                  if (elem[4] % 2 === elem[9] % 2)  {elem[10][4] = 1;_this.total[4]++}
                }


              })

            })
            .catch(function (error) {
              console.log(error);
            });
          _this.compData();
          document.getElementsByClassName("inputsubmit")[0].value =null;
        }
      },
      mounted() {

        this.timer = setInterval(this.get, 1000 * 60);
        this.get();
        // this.spreadwork();
        console.log(jutils.formatDate(new Date(), "YYYY-MM-DD HH:ii:ss"))
      }
      ,
      updata(){
       
            }

    })
  </script>
</body>

</html>